<template>
  <div class="orderPage">
    <div class="hb" v-if="showhp" @click="close">
      <div class="code_all">
        <div class="code_title">核销二维码</div>
        <image class="twoDCode" :src="qrcodeURL" ></image>
      </div>
    </div>
    <ul class="orderTabUl">
      <li :class="currentTab == 11?'active':''" @click="orderTabList(11)">全部</li>
      <li :class="currentTab == 0?'active':''"  @click="orderTabList(0)">待付款</li>
      <li :class="currentTab == 1?'active':''"  @click="orderTabList(1)">待发货</li>
      <li :class="currentTab == 2?'active':''"  @click="orderTabList(2)">待收货</li>
      <li :class="currentTab == 3?'active':''"  @click="orderTabList(3)">分享中</li>
    </ul>
    <div class="orderItemDiv" v-if="orderDate.length > 0">
      <order-item 
      v-for="(item,index) in orderDate" 
      :key="index" 
      :orderShopItem="item"
      @getCode="getCode(item)"
      @refresh="refresh">
      </order-item>
    </div>
    <div v-else class="boOrderList">
      <div class="boOrderListTxt">
        <div><img src="/static/images/user/lackcard.png"></div>
        <p>暂无相关订单~</p>
      </div>
    </div>
    <div v-if="isBottom" class="bottomDiv"><img src="/static/images/goods/loading2.png">别拉了，到底啦~</div>
  </div>
</template>
<script>
import orderItem from '@/components/user/order-item'
const QR = require('@/utils/weapp-qrcode.js') 
export default {
  components: {
    orderItem
  },
  data(){  
    return {
      currentTab: null,//点击个人中心的什么进入的
      orderDate: [],
      page: 1,
      totalPage: Number,//总页数
      isBottom: false,//判断是否到底了


      qrcodeURL:'',
      codeText:'https://www.baidu.com/',
      showhp:false
    }
  },
  onReachBottom () { //上拉加载
    if(this.totalPage > this.page){
      wx.showLoading({ //数据请求前loading，
        title: '加载中',
      })
      this.page++
      this.refreshList()
    }else{
      this.isBottom = true
    }
  }, 
  //下拉刷新
  onPullDownRefresh(){
    wx.stopPullDownRefresh();//设置下拉弹回去
    this.isBottom = false
  },
  onLoad(option){
    this.currentTab = option.aid
    this.orderTabList(option.aid)
  },
  methods:{
    close(){
      this.showhp = false
    },
    drawImg() {
      var imgData = QR.drawImg(this.codeText, {
        typeNumber: 4,
        errorCorrectLevel: 'M',
        size: 500
                  //这里照着写就是，如果要彻底弄懂请看weapp-qrcode.js
      })
      this.qrcodeURL=imgData;
      this.showhp = true
    },
    getCode(item){
      let orderNo = item.orderNo
      console.log("生成订单二维码")
      console.log(orderNo)
      this.codeText = orderNo
      this.drawImg()
    },
    orderTabList(tab){//导航栏点击传参查询不同状态商品
      this.currentTab = tab;
      this.page = 1;
      this.isBottom = false;
      this.orderDate = [];
      this.$nextTick(()=>{
        this.refreshList()
      })
    },
    refreshList(){
      this.$http.get(`order/orderPage?status=${this.currentTab}&page=${this.page}`,'','',false).then((res)=>{
        this.orderDate = this.orderDate.concat(res.data.data.responses)  
        console.log(JSON.stringify(this.orderDate))
        this.totalPage = res.data.data.totalPage
        wx.hideLoading({ //数据请求前loading，
          title: '',
        })
      })
    },
    refresh(){
    	this.page = 1
      this.orderDate = []
      this.$http.get(`order/orderPage?status=${this.currentTab}&page=${this.page}`,'','',false).then((res)=>{  
        this.orderDate = res.data.data.responses 
        this.totalPage = res.data.data.totalPage
      })
    }
  },
}
</script>
<style scoped>
.orderPage{
  background: #EFEFF4;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
}
.orderTabUl{
  display: flex;
  align-items: center;
  height: 90rpx;
  font-size: 28rpx;
  color: #d2d2d2;
  background: #fafafa;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}
.orderTabUl li{
  flex: 1;
  text-align: center;
}
.orderTabUl li.active{
  color: #000000 
}
.orderItemDiv{
  padding-top: 70rpx;
}
.boOrderList{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50%;
}
.boOrderList .boOrderListTxt div{
  width: 260rpx;
  height: 170rpx;
  margin: 0 auto;
}
.boOrderList .boOrderListTxt div img{
  width: 100%;
  height: 100%;  
}
.boOrderList .boOrderListTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}
.bottomDiv{
  background: #fff;
  width: 100%;
  font-size: 26rpx;
  color: #a09f9f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  padding: 10rpx 0;
  position: relative;
}
.bottomDiv>img{
  width: 34rpx;
  height: 34rpx;
  margin-right: 10rpx;
}

.hb{
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.67)
}
.code_all{
  width: 450rpx;
  height: 500rpx;
  border-radius: 16rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}
.twoDCode{
  width: 300rpx;
  height: 300rpx;
}
.code_title{
  font-size: 30rpx;
  color: #040404;
  margin-bottom: 40rpx;
  font-weight: bold
}
</style>